/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import { MapView, MapTypes, MapModule, Geolocation, PoiSearch } from '@zzzkk2009/react-native-baidu-map';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class ChoseClubAddress extends Component{
    constructor(props) {
        super(props);
        this.state = {
            marker:{
                latitude:40.057406655722,
                longitude:116.29644071728,
                title:''
            },
            zoom:15,
            center:{
                latitude:40.057406655722,
                longitude:116.29644071728,
            },
            locationCity:''
        }; 
    }
    componentDidMount() {
        Geolocation.getCurrentPosition()
        .then(data => {
            // console.log('getCurrentPosition.data===', data)
            alert(JSON.stringify(data))
            this.setState({
                center: {
                    latitude: data.latitude,
                    longitude: data.longitude,
                },
                marker:{
                    latitude:data.latitude,
                    longitude:data.longitude,
                    title:''
                },
            })

            if (Platform.OS == 'ios') {
                alert(111)
            }else {
                this.setState({
                    // shopAddress: data.address,
                    locationCity: data.city,
                    // currentDistrict: data.district
                })
            }
        // console.log('getCurrentPosition.this.state===', this.state)

        })
        .catch(e =>{
            this.setState({
                locationCity:'北京市'
            })
            console.warn(e, 'error')
        })
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'选择地点'} 
                    leftPress={()=>this.goBack()}
                    rightText={'保存'}
                    rightTextPress={()=>this.saveAddress()}
                    rightTextStyle={{color:'#fff',fontSize:16}}/>
                <MapView
                    style={styles.map}
                    center={this.state.center}
                    marker={this.state.marker}
                    zoom={this.state.zoom}
                    onMapClick={(data)=>this.clickMap(data)}/>
                <View style={{position:'absolute',top:50,left:0,zIndex:1000,width:width,padding:3,height:40}}>
                    <TouchableOpacity onPress={()=>this.goSearch()} style={{backgroundColor:'#fff',flex:1,justifyContent:'center',paddingLeft:10}}>
                        <Text>请输入关键词</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )

    }

    goBack(){
        this.props.navigation.goBack();
    }

    goAddLabel(){
        const {navigate} = this.props.navigation;
        navigate('AddLabel');
    }
    goSearch(){
        var $this = this;
        const {navigate} = this.props.navigation;
        navigate('Search',{city:$this.state.locationCity,getSearchData:(data)=>{
            $this.setState({
                marker:{
                    latitude:data.latitude,
                    longitude:data.longitude,
                    title:''
                },
                center:{
                    latitude:data.latitude,
                    longitude:data.longitude,
                },
            })
        }});
    }
    saveAddress(){
        var $this = this;
        Geolocation.reverseGeoCode(this.state.marker.latitude, this.state.marker.longitude)
        .then((response) => {
            // alert(JSON.stringify(response))
            var address = response.address;
            var obj = {};
            obj.address = address;
            obj.lat = $this.state.marker.latitude;
            obj.lng = this.state.marker.longitude;
            $this.props.navigation.state.params.getAddress(obj);
            $this.goBack();
        })
        
    }
    clickMap(data){
        // alert(data.latitude);
        this.setState({
            center:{
                latitude:data.latitude,
                longitude:data.longitude,
            },
            marker:{latitude: data.latitude, longitude: data.longitude,title:''},

        })
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    map: {
        width: width,
        ...Platform.select({
            ios: {
                height: height-20
            },
            android: {
                height: height
            }
        }),
        
    },
    
});